<template>
  <main class="pageIndex">
    <h1>主页</h1>
    
    <template v-for="item in list">
      <h2>{{item.title}}</h2>
      <ol>
        <li :key="it.link" v-for="(it,idx) in item.list">
          <router-link  :to="it.link">{{it.title}}</router-link>
        </li>
      </ol>
    </template>
  </main>
</template>

<script>
const sidebar = require('../sidebar')
function mapLink(children) {
  return children.map(it => {
    return {
      title: it[1],
      link: it[0]
    }
  })
}
export default {
  data(){
    return {
      sidebar
    }
  },
  computed: {
    list: function() {
      let arr = this.sidebar.map(it =>{
        return {
          title: it.title,
          list: mapLink(it.children)
        }
      })
      return arr
    }
  }
}
</script>
